<template>
    <div class="main">
        <img src="~/assets/images/openaccount/form-title-bj.png" class="index-title-bj" alt="" />
        <div class="title">填写开户信息</div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="right" label-width="160px"
            class="demo-ruleForm form">
            <template v-if="!next">
                <!-- <el-form-item label="申请人:" prop="name">
                    <el-input
                        v-model="ruleForm.name"
                        placeholder="请输入代账公司名称或个人姓名"
                    ></el-input>
                </el-form-item>
                <el-form-item label="联系电话:" prop="tel">
                    <el-input
                        v-model="ruleForm.tel"
                        placeholder="请输入电话号码以便开户中接收通知"
                    ></el-input>
                </el-form-item> -->
                <el-form-item label="银行地区:" prop="pAc">
                    <el-cascader v-model="address" ref="citySelect" class="cate-tab-select" placeholder="请选择银行地区"
                        :options="city_region" :props="{
                            value: 'name',
                            label: 'name',
                            children: 'cities',
                        }" clearable filterable @change="cityChange"></el-cascader>
                </el-form-item>
                <el-form-item label="开户网点:" prop="bank_id">
                    <el-select v-model="ruleForm.bank_id" placeholder="请选择开户网点" @change="changBank">
                        <el-option v-for="(item, index) in bankList" :key="index" :label="item.bank_name"
                            :value="item.id" no-data-text="无数据"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="申请开通账户:" prop="type">
                    <el-select v-model="ruleForm.type" placeholder="请选择开通账户类型" @change="show_withdraw_money">
                        <el-option label="一般存款账户" value="1"></el-option>
                        <el-option label="基本存款账户" value="2"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="开户年额度:" prop="account_id">
                    <el-select v-model="ruleForm.account_id" placeholder="请选择开户额度" no-data-text="请选择银行">
                        <el-option v-for="(item, index) in openaccountList" :key="index" :label="item.account"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="预约开户日期:" prop="date">
                    <el-date-picker v-model="ruleForm.date" type="date" placeholder="选择日期" style="width: 100%"
                        format="yyyy-MM-dd" :picker-options="pickerOptions" @change="datechange">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="预约开户时间:" prop="time_id">
                    <el-select v-model="ruleForm.time_id" placeholder="请选择预约时间" no-data-text="请先选择预约开户日期">
                        <template v-if="ruleForm.date">
                            <el-option v-for="(item, index) in timeList" :key="index" :label="item.name"
                                :value="item.id" :disabled="item.disabled"></el-option>
                        </template>
                    </el-select>
                </el-form-item>

                <el-form-item label="提现时是否提供发票:" prop="applicant_type">
                    <el-radio v-model="ruleForm.applicant_type" label="2" @input="applicant_type_chang">是</el-radio>
                    <el-radio v-model="ruleForm.applicant_type" label="1" @input="show_withdraw_money">否</el-radio>
                    <span
                        @click="previewImg('https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/openaccount-tips1-big.png?v=1')"
                        style="color: #409EFF;cursor: pointer;font-size: 13px;">示例</span>
                </el-form-item>

                <!-- <el-form-item label="上门勘点时间:" prop="visit_date_time">
                    <el-date-picker
                        v-model="ruleForm.visit_date_time"
                        type="datetime"
                        placeholder="选择上门勘点时间"
                        style="width: 100%"
                        format="yyyy-MM-dd hh:mm"
                    >
                    </el-date-picker>
                </el-form-item> -->
                <el-form-item label="法人是否亲自办理:" prop="is_agent">
                    <el-radio v-model="ruleForm.is_agent" label="0">否</el-radio>
                    <el-radio v-model="ruleForm.is_agent" label="1">是</el-radio>
                </el-form-item>
                <!-- <el-form-item label="开户时法人是否到场:" prop="is_present">
                    <el-radio v-model="ruleForm.is_present" label="1"
                        >是</el-radio
                    >
                    <el-radio v-model="ruleForm.is_present" label="0"
                        >否</el-radio
                    >
                </el-form-item> -->
                <!-- <el-form-item label="上门时法人是否在场:" prop="fa_bepresent">
                    <el-radio v-model="ruleForm.fa_bepresent" label="1"
                        >是</el-radio
                    >
                    <el-radio v-model="ruleForm.fa_bepresent" label="0"
                        >否</el-radio
                    >
                </el-form-item> -->

                <el-form-item label="预估开户奖励(按实际开户当月政策结算):" class="is-required">
                    <div style="color: #f56c6c">{{ ruleForm.money }}元</div>
                </el-form-item>
            </template>

            <!-- 下一步 -->
            <template v-if="next">
                <el-form-item label="法人姓名:" prop="fa_name">
                    <el-input v-model="ruleForm.fa_name" placeholder="请输入法人姓名(上传营业执照后自动填充)"></el-input>
                </el-form-item>
                <el-form-item label="法人联系电话:" prop="fa_tel">
                    <el-input v-model="ruleForm.fa_tel" placeholder="请输入法人的联系电话"></el-input>
                </el-form-item>
                <el-form-item label="开户公司名称:" prop="company_name">
                    <el-input v-model="ruleForm.company_name" placeholder="请输入需要开户的公司名称(上传营业执照后自动填充)"></el-input>
                </el-form-item>

                <el-form-item label="上门勘点位置:" prop="visit_position">
                    <el-input v-model="ruleForm.visit_position" placeholder="请输入上门勘点位置(上传营业执照后自动填充)"></el-input>
                </el-form-item>
                <el-form-item v-if="ruleForm.is_agent == '0'" label="经办人姓名:" prop="jing_name">
                    <el-input v-model="ruleForm.jing_name" placeholder="请输入经办人姓名"></el-input>
                </el-form-item>
                <el-form-item v-if="ruleForm.is_agent == '0'" label="经办人联系电话:" prop="jing_tel">
                    <el-input v-model="ruleForm.jing_tel" placeholder="请输入经办人的联系电话"></el-input>
                </el-form-item>
                <el-form-item label="法定代表人身份证:" prop="fa_idcard">
                    <div style="display: flex">
                        <el-upload class="avatar-uploader" :action="imgUploadUrl" :show-file-list="false"
                            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :headers="header">
                            <img v-if="ruleForm.fa_idcard1" :src="ruleForm.fa_idcard1" class="avatar" />
                            <img v-else src="~/assets/images/openaccount/sfz-1.png" class="upbj" alt="" />
                        </el-upload>
                        <el-upload class="avatar-uploader" :action="imgUploadUrl" :show-file-list="false"
                            :on-success="handleAvatarSuccess2" :before-upload="beforeAvatarUpload" :headers="header">
                            <img v-if="ruleForm.fa_idcard2" :src="ruleForm.fa_idcard2" class="avatar" />
                            <img v-else src="~/assets/images/openaccount/sfz-2.png" class="upbj" alt="" />
                        </el-upload>
                    </div>
                </el-form-item>
                <el-form-item v-if="ruleForm.is_agent == '0'" label="经办人身份证:" prop="jing_idcard">
                    <div style="display: flex">
                        <el-upload class="avatar-uploader" :action="imgUploadUrl" :show-file-list="false"
                            :on-success="handleAvatarSuccess3" :before-upload="beforeAvatarUpload" :headers="header">
                            <img v-if="ruleForm.jing_idcard1" :src="ruleForm.jing_idcard1" class="avatar" />
                            <img v-else src="~/assets/images/openaccount/sfz-1.png" class="upbj" alt="" />
                        </el-upload>
                        <el-upload class="avatar-uploader" :action="imgUploadUrl" :show-file-list="false"
                            :on-success="handleAvatarSuccess4" :before-upload="beforeAvatarUpload" :headers="header">
                            <img v-if="ruleForm.jing_idcard2" :src="ruleForm.jing_idcard2" class="avatar" />
                            <img v-else src="~/assets/images/openaccount/sfz-2.png" class="upbj" alt="" />
                        </el-upload>
                    </div>
                </el-form-item>
                <el-form-item label="营业执照正本:" prop="business_license">
                    <el-upload class="avatar-uploader" :action="imgUploadUrl" :show-file-list="false"
                        :on-success="handleAvatarSuccess5" :before-upload="beforeUpload_business_license"
                        :headers="header">
                        <img v-if="ruleForm.business_license" :src="ruleForm.business_license" class="avatar" />
                        <img v-else src="~/assets/images/openaccount/sfz-3.png" class="upbj" alt="" />
                    </el-upload>
                </el-form-item>
            </template>
            <!-- 下一步 -->

            <el-form-item>
                <div style="display: flex; justify-content: center">
                    <div v-if="!next" class="submit">
                        <el-button class="submit-button" type="primary" @click="nextForm('ruleForm')">下一步</el-button>
                    </div>
                    <div v-if="next" class="submit">
                        <el-button class="submit-button" type="primary" @click="next = false">上一步</el-button>
                    </div>
                    <div v-if="next" class="submit">
                        <el-button class="submit-button" type="primary" @click="submitForm('ruleForm')">提交信息</el-button>
                    </div>
                </div>
            </el-form-item>
        </el-form>
        <el-image class="my-img" v-show="false" ref="myImg" src="" :preview-src-list="previewList">
        </el-image>
    </div>
</template>

<script>
import { mapState } from "vuex";

import {
    bank_list,
    booking_submit,
    bank_info,
    bank_openaccount,
    show_withdraw_money,
    get_city_list,
    company_ocr,
    book_detail_edit,
} from "@/assets/api/openAccount.js";
// import region from "@/assets/json/region-just-city.json";
import axios from "axios";
import {
    getTime2,
    getTime,
    isToday,
    isCurrentTimeBeforeGivenTime,
    parseDate,
    parseDateTime,
} from "@/assets/utils/utils.js";

export default {
    async asyncData({ params, query }) {
        let data = {};
        return data;
    },
    head() {
        return {
            title: "小竹开户-【小竹财税平台】",
            meta: [],
        };
    },
    layout: "home",
    components: {},
    data() {
        return {
            imgUploadUrl: "",
            token: "",

            next: false,

            previewList: [],

            address: "",
            region: [],
            city_region: [],
            bankList: [],
            timeList: [],
            selectAddress: "",
            submitFormSwitch: false,
            ruleForm: {
                name: "",
                tel: "",
                company_name: "",
                type: "",
                pAc: "",
                bank_id: "",
                date: "",
                time_id: "",
                applicant_type: "1",
                is_agent: "1",
                is_present: "1",
                fa_bepresent: "0",
                account_id: "",

                fa_idcard1: "",
                fa_idcard2: "",
                fa_idcard: "",
                fa_tel: "",
                fa_name: "",

                jing_name: "",
                jing_idcard1: "",
                jing_idcard2: "",
                jing_idcard: "",
                jing_tel: "",

                business_license: "",

                money: "--",

                visit_position: "",
                visit_date_time: "",
            },
            rules: {
                visit_date_time: [
                    {
                        required: true,
                        message: "请输入上门勘点时间",
                        trigger: "blur",
                    },
                ],
                visit_position: [
                    {
                        required: true,
                        message: "请输入上门勘点位置",
                        trigger: "blur",
                    },
                ],
                jing_tel: [
                    {
                        required: true,
                        message: "请输入电话号码",
                        trigger: "blur",
                    },
                ],
                jing_name: [
                    {
                        required: true,
                        message: "请输入经办人姓名",
                        trigger: "blur",
                    },
                ],
                fa_name: [
                    {
                        required: true,
                        message: "请输入法人姓名",
                        trigger: "blur",
                    },
                ],
                account_id: [
                    {
                        required: true,
                        message: "请选择开户额度",
                        trigger: "blur",
                    },
                ],
                applicant_type: [
                    {
                        required: true,
                        message: "!",
                        trigger: "blur",
                    },
                ],
                is_present: [
                    {
                        required: true,
                        message: "!",
                        trigger: "blur",
                    },
                ],
                fa_idcard: [
                    {
                        required: true,
                        message: "请上传图片",
                        trigger: "blur",
                    },
                ],
                jing_idcard: [
                    {
                        required: true,
                        message: "请上传图片",
                        trigger: "blur",
                    },
                ],

                business_license: [
                    {
                        required: true,
                        message: "请上传图片",
                        trigger: "blur",
                    },
                ],
                name: [
                    {
                        required: true,
                        message: "请输入代账公司名称或个人姓名",
                        trigger: "blur",
                    },
                ],
                fa_tel: [
                    {
                        required: true,
                        message: "请输入法人的联系电话",
                        trigger: "blur",
                    },
                ],

                tel: [
                    {
                        required: true,
                        message: "请输入电话号码以便开户中接收通知",
                        trigger: "blur",
                    },
                ],
                company_name: [
                    {
                        required: true,
                        message: "请输入公司名称",
                        trigger: "blur",
                    },
                ],
                fa_bepresent: [
                    {
                        required: true,
                        message: "请选择法人是否在场",
                        trigger: "blur",
                    },
                ],
                type: [
                    {
                        required: true,
                        message: "请选择开通账户类型",
                        trigger: "blur",
                    },
                ],
                pAc: [
                    {
                        required: true,
                        message: "请选择银行地区",
                        trigger: "blur",
                    },
                ],
                bank_id: [
                    {
                        required: true,
                        message: "请选择预约银行",
                        trigger: "blur",
                    },
                ],
                date: [
                    {
                        type: "date",
                        required: true,
                        message: "请选择日期",
                        trigger: "blur",
                    },
                ],
                time_id: [
                    {
                        required: true,
                        message: "请选择预约时间",
                        trigger: "change",
                    },
                ],
                radio: [
                    {
                        required: true,
                        message: "请选择",
                        trigger: "blur",
                    },
                ],
                radio2: [
                    {
                        required: true,
                        message: "请选择",
                        trigger: "blur",
                    },
                ],
            },

            openaccountList: [], // 开户额度

            pickerOptions: {
                disabledDate(date) {
                    // 获取当前日期和时间
                    const now = new Date();

                    // 获取当前日期的00:00:00
                    const todayStart = new Date(
                        now.getFullYear(),
                        now.getMonth(),
                        now.getDate(),
                        0,
                        0,
                        0,
                        0
                    );

                    // 获取明天的00:00:00
                    const tomorrowStart = new Date(todayStart);
                    tomorrowStart.setDate(todayStart.getDate());
                    // 比较时间
                    return date.getTime() < tomorrowStart.getTime();
                },
            },

            loadingObj: null,
            rewriteObj: null,
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
        //上传图片的请求头
        header() {
            return {
                token: this.userInfo && this.token ? this.token : "",
            };
        },
    },
    created() { },
    mounted() {
        this.token = localStorage.getItem("token");
        this.imgUploadUrl = axios.defaults.baseURL + "/api/common/upload";
        // this.region = [];
        // let regionList = region;
        // // for (let items of regionList) {
        // //     for (let item of items.children) {
        // //         delete item.children;
        // //     }
        // //     if (items.children.length > 1 && items.children[0].name !== "全部")
        // //         items.children.unshift({
        // //             id: items.id,
        // //             level: 2,
        // //             name: "全部",
        // //             pid: items.pid,
        // //         });
        // // }
        // this.region = regionList;

        if (this.$route.query.bank_id)
            this.bank_info(this.$route.query.bank_id);

        // this.bank_openaccount();

        // this.show_withdraw_money();

        this.get_city_list();

        this.isRewrite();
    },
    watch: {},
    methods: {
        // 判断是否是重新提交
        isRewrite() {
            if (!this.$route.query.rewrite) {
                return;
            }
            let formData = JSON.parse(localStorage.getItem("openaccountData"));
            this.rewriteObj = formData;
            console.log(formData);
            this.ruleForm.type = formData.type + "";
            this.ruleForm.account_id = formData.account_id;
            this.ruleForm.date = parseDate(formData.date);
            this.ruleForm.time_id = formData.time_id;
            this.ruleForm.applicant_type = formData.applicant_type + "";
            // this.ruleForm.visit_date_time = parseDateTime(
            //     `${formData.visit_date} ${formData.visit_time}:00`
            // );
            this.ruleForm.is_agent = formData.is_agent + "";
            this.ruleForm.fa_name = formData.fa_name;
            this.ruleForm.fa_tel = formData.fa_tel;
            this.ruleForm.company_name = formData.company_name;
            this.ruleForm.visit_position = formData.visit_position;
            this.ruleForm.jing_name = formData.jing_name;
            this.ruleForm.jing_tel = formData.jing_tel;

            this.ruleForm.fa_idcard1 = formData.fa_idcard.split(",")[0];
            this.ruleForm.fa_idcard2 = formData.fa_idcard.split(",")[1];
            this.ruleForm.fa_idcard = formData.fa_idcard;

            this.ruleForm.jing_idcard1 = formData.jing_idcard.split(",")[0];
            this.ruleForm.jing_idcard2 = formData.jing_idcard.split(",")[1];
            this.ruleForm.jing_idcard = formData.jing_idcard;

            this.ruleForm.business_license = formData.business_license;

            this.bank_info(formData.bank_id);
        },

        // 获取城市列表
        async get_city_list() {
            const res = await get_city_list({});
            if (res.code == 1) {
                this.city_region = res.data;
            }
        },

        async show_withdraw_money() {
            console.log(this.ruleForm.type);
            console.log(this.ruleForm.bank_id);
            if (this.ruleForm.type && this.ruleForm.bank_id) {
                let type = this.ruleForm.type;
                let applicant_type = this.ruleForm.applicant_type;
                let ptype = 0;
                if (type == "1" && applicant_type == "1") {
                    ptype = 3;
                } else if (type == "1" && applicant_type == "2") {
                    ptype = 1;
                } else if (type == "2" && applicant_type == "2") {
                    ptype = 2;
                } else if (type == "2" && applicant_type == "1") {
                    ptype = 4;
                }
                const res = await show_withdraw_money({
                    bank_id: this.ruleForm.bank_id,
                    type: ptype,
                });
                if (res.code == 1) {
                    this.ruleForm.money = res.data;
                }
            } else this.ruleForm.money = "--";
        },

        async bank_info(id) {
            const res = await bank_info({
                id: id,
            });
            if (res.code == 1) {
                this.ruleForm.bank_id = parseInt(res.data.id);
                this.timeList = res.data.time;
                this.bankList.push(res.data);
                this.address = [
                    res.data.province,
                    res.data.city,
                    res.data.area,
                ];
                this.ruleForm.pAc =
                    res.data.province + res.data.city + res.data.area;
                this.bank_openaccount();

                this.show_withdraw_money();
            }
        },

        async bank_openaccount() {
            const res = await bank_openaccount({
                bank_id: this.ruleForm.bank_id,
            });
            if (res.code == 1) {
                this.openaccountList = res.data;
            }
        },

        previewImg(url) {
            this.previewList = [url];
            this.$refs.myImg.showViewer = true;
        },

        nextForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.next = true;
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },

        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(this.ruleForm);
                    if (!this.ruleForm.fa_idcard) {
                        this.$alert("请上传身份证", "提示", {
                            confirmButtonText: "确定",
                        });
                        return;
                    }
                    this.booking_submit();
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },

        async booking_submit() {
            if (this.submitFormSwitch && window.location.hostname === "www.xzcs2022.com") return;
            this.submitFormSwitch = true;
            // let visit_date_time = getTime(this.ruleForm.visit_date_time).split(
            //     " "
            // );
            let booking_submit_fun = booking_submit;
            let params = {};
            if (this.$route.query.rewrite) {
                booking_submit_fun = book_detail_edit;
                params.id = this.rewriteObj.id;
                params.status = 1;
            }
            const res = await booking_submit_fun({
                ...params,
                // name: this.ruleForm.name,
                // tel: this.ruleForm.tel,
                company_name: this.ruleForm.company_name,
                applicant_type: this.ruleForm.applicant_type,
                type: this.ruleForm.type,
                bank_id: this.ruleForm.bank_id,
                time_id: this.ruleForm.time_id,
                date: getTime2(this.ruleForm.date),
                account_id: this.ruleForm.account_id,
                // fa_bepresent: this.ruleForm.fa_bepresent,

                is_agent: this.ruleForm.is_agent,
                // is_present: this.ruleForm.is_present,
                fa_tel: this.ruleForm.fa_tel,
                fa_idcard: this.ruleForm.fa_idcard,
                jing_tel: this.ruleForm.jing_tel,
                jing_idcard: this.ruleForm.jing_idcard,
                business_license: this.ruleForm.business_license,
                fa_name: this.ruleForm.fa_name,
                jing_name: this.ruleForm.jing_name,

                money: this.ruleForm.money,

                // visit_date:
                //     this.ruleForm.account_id > 1 ? visit_date_time[0] : "",
                // visit_time:
                //     this.ruleForm.account_id > 1
                //         ? visit_date_time[1].slice(0, -3)
                //         : "",
                // visit_date: visit_date_time[0],
                // visit_time: visit_date_time[1].slice(0, -3),
                visit_position: this.ruleForm.visit_position,

                device_type: "2",
            });
            // this.submitFormSwitch = false;
            if (res.code == 1) {
                this.$message({
                    message: "预约成功",
                    type: "success",
                });
                this.$router.push({
                    path: "/openaccount",
                });
            } else {
                this.submitFormSwitch = false;
            }
        },

        cityChange(citys) {
            let label1 = "";
            let label2 = "";
            let label3 = "";
            this.bankList = [];
            this.ruleForm.bank_id = "";
            this.timeList = [];
            this.ruleForm.time_id = "";
            this.ruleForm.account_id = "";
            this.openaccountList = [];
            this.ruleForm.date = "";
            for (let items of this.city_region) {
                if (items.name == citys[0]) {
                    label1 = items;
                    break;
                }
            }
            for (let item of label1.cities) {
                if (item.name == citys[1]) {
                    label2 = item;
                    break;
                }
            }
            for (let item of label2.cities) {
                if (item.name == citys[2]) {
                    label3 = item;
                    break;
                }
            }
            // if (!label || this.selectAddress == label) return;
            this.page = 1;
            this.ruleForm.pAc = label2.name + label2.name + label3.name;
            this.bank_list(label1, label2, label3);
            console.log(this.address);
        },

        async bank_list(province, city, area) {
            const res = await bank_list({
                province: province.name,
                city: city.name,
                area: area.name,
                pagesize: 9999,
            });
            if (res.code == 1) {
                this.bankList = res.data;
            }
        },

        applicant_type_chang() {
            if (this.ruleForm.applicant_type == "2") {
                this.show_withdraw_money();
                this.$alert(
                    "若您确定在提现时能够开具符合要求的发票，请选择“是”选项。开票公司需与提现单位保持一致",
                    "提示"
                );
            }
        },

        datechange() {
            this.ruleForm.time_id = "";
            if (this.ruleForm.date && isToday(this.ruleForm.date)) {
                for (let item of this.timeList) {
                    const [startTimeStr, endTimeStr] = item.name.split("-");
                    if (isCurrentTimeBeforeGivenTime(startTimeStr)) {
                        item.disabled = false;
                    } else {
                        item.disabled = true;
                    }
                }
                this.timeList = [...this.timeList];
            } else {
                for (let item of this.timeList) {
                    item.disabled = false;
                }
                this.timeList = [...this.timeList];
            }
        },

        changBank(e) {
            for (let item of this.bankList) {
                if (item.id == e) {
                    this.timeList = item.time;
                    this.ruleForm.time_id = "";
                    this.ruleForm.date = "";
                    this.ruleForm.account_id = "";
                    this.openaccountList = [];
                    this.show_withdraw_money();
                    this.bank_openaccount();
                }
            }
        },

        handleAvatarSuccess(res, file) {
            this.ruleForm.fa_idcard1 = res.data.fullurl;
            if (this.ruleForm.fa_idcard2)
                this.ruleForm.fa_idcard = `${this.ruleForm.fa_idcard1},${this.ruleForm.fa_idcard2}`;
        },
        handleAvatarSuccess2(res, file) {
            this.ruleForm.fa_idcard2 = res.data.fullurl;
            if (this.ruleForm.fa_idcard1)
                this.ruleForm.fa_idcard = `${this.ruleForm.fa_idcard1},${this.ruleForm.fa_idcard2}`;
        },

        handleAvatarSuccess3(res, file) {
            this.ruleForm.jing_idcard1 = res.data.fullurl;
            if (this.ruleForm.jing_idcard2)
                this.ruleForm.jing_idcard = `${this.ruleForm.jing_idcard1},${this.ruleForm.jing_idcard2}`;
        },
        handleAvatarSuccess4(res, file) {
            this.ruleForm.jing_idcard2 = res.data.fullurl;
            if (this.ruleForm.jing_idcard1)
                this.ruleForm.jing_idcard = `${this.ruleForm.jing_idcard1},${this.ruleForm.jing_idcard2}`;
        },

        /**
         * "order_no":"391805940167846420",
         * "legal_person":"袁林",
         * "capital":"壹仟万圆整",
         * "valid_date":"",
         * "address":"合肥市包河区马鞍山路与望江东路金中环广场A座1805室",
         * "reg_num":"91340100MA8NE9RQ8P",
         * "company":"安徽小竹信息技术有限公司",
         * "establish_date":"20211118",
         * "business":"一般项目:软件开发;技术服务、技术开发、技术咨询、技术交流、技术转让、技术推广;人工智能应用软件开发;人工智能理论与算法软件开发;人工智能公共服务平台技术咨询服务;人工智能基础软件开发;人工智能公共数据平台;人工智能通用应用系统;信息系统集成服务;互联网数据服务;数据处理和存储支持服务;企业管理;企业管理咨询;财务咨询;税务服务;教育咨询服务(不含涉许可审批的教育培训活动);文艺创作;电影摄制服务;图书管理服务;人力资源服务(不含职业中介活动、劳务派遣服务):组织文化艺术交流活动;居民日常生活服务;二手日用百货销售(除许可业务外,可自主依法经营法律法规非禁止或限制的项目)许可项目:出版物互联网销售;出版物批发;第二类增值电信业务:职业中介活动(依法须经批准的项目,经相关部门批准后方可开展经营活动,具体经营项目以相关部门批准文件或许可证件为准)",
         * "type":"其他有限责任公司"
         * **/
        async handleAvatarSuccess5(res, file) {
            this.ruleForm.business_license = res.data.fullurl;

            const ocrres = await company_ocr({
                business_license: res.data.fullurl,
            });
            this.loadingObj.close();
            if (ocrres.code == 200) {
                if (ocrres.data.company === null) {
                    this.$alert("OCR识别失败，请上传清晰的图片", "提示", {
                        confirmButtonText: "确定",
                    });
                } else {
                    this.ruleForm.fa_name = ocrres.data.legal_person;
                    this.ruleForm.company_name = ocrres.data.company;
                    this.ruleForm.visit_position = ocrres.data.address;
                }
            }
        },

        beforeUpload_business_license(file) {
            const isType =
                file.type == "image/jpeg" ||
                file.type == "image/jpg" ||
                file.type == "image/png";
            const isLtMB = file.size / 1024 / 1024 < 1;

            if (!isType) {
                this.$message.error("上传图片只能是 JPG,JPEG,PNG 格式!");
            }
            if (!isLtMB) {
                this.$message.error("上传图片大小不能超过 1MB!");
            }
            if (isType && isLtMB)
                this.loadingObj = this.$loading({
                    lock: true,
                    text: "OCR识别中",
                    spinner: "el-icon-loading",
                    background: "rgba(0, 0, 0, 0.7)",
                });

            return isType && isLtMB;
        },

        beforeAvatarUpload(file) {
            const isType =
                file.type == "image/jpeg" ||
                file.type == "image/jpg" ||
                file.type == "image/png";
            const isLtMB = file.size / 1024 / 1024 < 1;

            if (!isType) {
                this.$message.error("上传图片只能是 JPG,JPEG,PNG 格式!");
            }
            if (!isLtMB) {
                this.$message.error("上传图片大小不能超过 1MB!");
            }
            return isType && isLtMB;
        },
    },
};
</script>

<style lang="scss" scoped>
.main {
    width: 1200px;
    padding-top: 54px;
    margin: 16px auto;
    background: linear-gradient(180deg, #c9e7ff 0%, #ffffff 20%);
    position: relative;

    .index-title-bj {
        position: absolute;
        top: 20px;
        left: calc(50% + 180px);
        width: 139px;
        height: auto;
    }
}

.title {
    text-align: center;
    font-weight: 700;
    font-size: 40px;
}

.button {
    user-select: none;
    cursor: pointer;

    &:hover {
        opacity: 0.9;
    }

    &:active {
        opacity: 0.8;
    }
}

.form {
    width: 700px;
    margin: 0 auto;
    padding-top: 56px;
    padding-bottom: 56px;
}

::v-deep .el-select,
.el-cascader {
    width: 100%;
}

.submit {
    margin: 46px 20px 0;
    text-align: center;

    .submit-button {
        width: 279px;
        height: 60px;
        font-weight: 500;
        font-size: 24px;
        color: #ffffff;
    }
}

.avatar-uploader {
    margin-right: 20px;

    &::v-deep .el-upload {
        cursor: pointer;
        position: relative;
        overflow: hidden;
        height: 100px;
    }
}

.avatar-uploader {
    &::v-deep .el-upload:hover {
        border-color: #409eff;
    }
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 237px;
    height: 150px;
    line-height: 150px;
    text-align: center;
}

.avatar {
    width: 160px;
    height: 100px;
    display: block;
    object-fit: cover;
}

.upbj {
    width: 160px;
    height: 100px;
}
</style>